<template>
<div class="position">
  <span class="iconfont position__icon">&#xe65c;</span>
  舟山市定海区财富君庭1幢2单元
  <span class="iconfont position__notice">&#xe705;</span>
</div>
<div class="search">
  <span class="iconfont">&#xe648;</span>
  <span class="search__text">山姆会员商店优惠商品</span>
</div>
<div class="banner">
  <img
    class="banner__img"
    src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt="">
</div>
<div class="icons">
  <div class="icons__item" v-for="(item,index) in iconsList" :key="index">
    <img class="icons__item__img" :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="">
    <!-- 插值表达式 -->
    <p class="icons__item__desc">{{item.desc}}</p>
  </div>
</div>
<div class="gap"></div>
</template>

<script>

export default {
  components: {},
  data () {
    return {}
  },
  setup () {
    const iconsList = [
      { desc: '超市便利', imgName: '超市' }, { desc: '菜市场', imgName: '菜市场' },
      { desc: '水果店', imgName: '水果店' }, { desc: '鲜花绿植', imgName: '鲜花' },
      { desc: '医药健康', imgName: '医药健康' }, { desc: '时尚家居', imgName: '家居' },
      { desc: '烘焙蛋糕', imgName: '蛋糕' }, { desc: '签到', imgName: '签到' },
      { desc: '大牌免运', imgName: '大牌免运' }, { desc: '红包套餐', imgName: '红包' }
    ]
    return { iconsList }
  }
}
</script>
<style lang='scss' scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.position{
  position: relative;
  padding: .16rem .24rem .16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  color: $content-fontcolor;
  @include ellipse;
  &__icon{
    position: relative;
    top: .01rem;
    font-size: .2rem;
  }
  &__notice{
    position: absolute;
    top: .17rem;
    right: 0;
    font-size: .2rem;
  }
}
.search{
  // height: .32rem;
  line-height: .32rem;
  background: $search-bgColor;
  color: $search-fontColor;
  border-radius: .16rem;
  font-size: .14rem;
  margin-bottom: .12rem;
  .iconfont{
    font-size: .2rem;
    display: inline-block;
    padding: 0 .08rem 0 .16rem;
  }
  &__text{
    display: inline-block;
    font-size: .14rem;
  }
}
.banner{
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%; //高宽比 图片高度/宽度
  &__img{
    width: 100%;
  }
}
.icons{
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;
  &__item{
    width: 20%;
    &__img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }
    &__desc{
      margin: .06rem 0 .16rem 0;
      text-align: center;
      color: $content-fontcolor;
    }
  }
}
.gap{
  margin: 0 -.18rem;
  height: .1rem;
  background: $content-bgColor;
}
</style>
